<template>
	<view>
		<view class="baby-body">
			<view class="item">
			     <text class="name">{{$t(`时间`)}}</text>
				 <uni-datetime-picker  @change="changeLog">
					<text class="name" style="margin: 0 72rpx;">{{CurrentTime}}</text>
				 </uni-datetime-picker>
			</view>
			<view class="item">
                 <text class="name">{{$t(`身高`)}}</text>
				 <input class="input" placeholder-class="pla" type="digit" v-model="height" :placeholder="$t(`请输入身高`)"/>
				 <text class="name">{{$t(`cm`)}}</text>
			</view>
			<view class="item">
			     <text class="name">{{$t(`体重`)}}</text>
				 <input class="input" placeholder-class="pla" type="digit" v-model="weight" :placeholder="$t(`请输入体重`)"/>
				 <text class="name">{{$t(`kg`)}}</text>
			</view>
			<view class="item">
			     <text class="name">{{$t(`头围`)}}</text>
				 <input class="input" placeholder-class="pla" type="digit" v-model="head" :placeholder="$t(`请输入头围`)"/>
				 <text class="name">{{$t(`cm`)}}</text>
			</view>
		</view>
		<view class="Instructions">
			{{$t(`您主动填写的身高、体重、头围信息仅用于记录、绘
			制生长曲线，敏宝空间将持续保障您的个人信息安全。`)}}
		</view>
		<view class="verify" @click="recordUpdata()">{{$t(`保存记录`)}}</view>
		<view class="verify" @click="curveRouter()">{{$t(`查看曲线`)}}</view>
		<view class="verify" @click="recordDel()">{{$t(`删除记录`)}}</view>
	</view>
</template>

<script>
	import { BabyGenerateDetail,RecordModify,RecoedDel } from '@/api/baby.js';
	export default {
		data() {
			return {
				CurrentTime:'',
				height:'',//身高
				weight:'',//体重
				head:'',//头围、
				RecoedId:'',//记录id
				child_baby_id:'',//宝宝id
			}
		},
		onLoad:function(options){
			this.Detail(options.id)
		},
		methods: {
			/* 跳转查看单条生长记录曲线 */
			curveRouter:function(){
				uni.navigateTo({url:'/pages/babys/curve?id=' + this.RecoedId})
			},
			/* 删除成长记录 */
			recordDel:function(){
				let that = this;
				uni.showModal({
					title: that.$t(`取消`),
					content: that.$t(`您确认删除吗`),
					success: (res) => {
						if (res.confirm) {
							RecoedDel(that.RecoedId).then(data =>{
								that.$util.Tips(
									{
										title: data.msg
									},
									{
										tab: 3
									}
								);
							}).catch(err => {
								return that.$util.Tips({
									title: err
								});
							})
						}
					}
				});
			},
			/* 修改生长记录 */
			recordUpdata:function(){
				let that = this;
				if (!that.height) return that.$util.Tips({
					title: that.$t(`请输入宝宝的身高`)
				});
				if (!that.weight) return that.$util.Tips({
					title: that.$t(`请输入宝宝的体重`)
				});
				RecordModify({
					child_baby_id:that.child_baby_id,
					height:that.height,
					id:that.RecoedId,
					weight:that.weight,
					head:that.head? that.head : 0,
					record_time:that.timeStamp(that.CurrentTime)
				}).then(res => {
					return that.$util.Tips(
						{
							title:that.$t(`修改成功`)
						},
						function () {
							that.Detail(that.RecoedId)
						}
					);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
			/* 获取生长详情 */
			Detail:function(id){
				let that = this;
				BabyGenerateDetail(id).then(res => {
					that.height = res.data.height;
					that.weight = res.data.weight;
					that.head = res.data.head;
					that.CurrentTime = res.data.record_time_text.slice(0, 10);
					that.RecoedId = res.data.id;
					that.child_baby_id = res.data.child_baby_id
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
			changeLog(e) {
				this.CurrentTime = e;
			},
			/**
			 * 时间格式转换为时间戳
			 * 
			 */
			timeStamp:function(time){
				var date = new Date(time); // 将字符串转换为Date对象  
				var timestamp = date.getTime(); // 获取时间戳  
				return timestamp/1000
			},
		}
	}
</script>

<style lang="scss">
.verify{
	margin:  52rpx auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF8FB9;
	color: #FFFFFF;
	width: 556rpx;
	height: 88rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}	
.Instructions{
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	padding: 0 48rpx;
	color: #808080;
}	
.baby-body{
	margin: 16rpx 0 32rpx 0;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	.item{
		border-top: 1rpx solid #ececec;
		display: flex;
		align-items: center;
		padding: 32rpx;
		.name{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1A1A1A;
		}
		.pla{
			color: #808080;
		}
		.input{
			margin: 0 72rpx;
			width: 220rpx;
			font-size: 32rpx;
			color: #1A1A1A;
		}
	}
}
</style>
